<!--
 * @Description: 资源管理---运维资源---应用目录
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <div class="dataDic" style="padding: 0 15px;">
        <el-row class="el-query-bar" :gutter="12">
            <el-col style="width: 90px;line-height: 33px;">
                <span>资源类型：</span>
            </el-col>
            <el-col :span="3">
                <el-select v-model="resourceTypeValue" size="small" placeholder="请选择" style="width: 100%;">
                    <el-option
                            v-for="(item,index) in resourceTypeValueOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-col>

            <el-col style="width: 60px;line-height: 33px;">
                <span>名称：</span>
            </el-col>
            <el-col :span="3">
                <el-input
                        size="small"
                        placeholder="请输入名称"
                        v-model="dictionaryName">
                </el-input>
            </el-col>

            <el-col style="width: 60px;line-height: 33px;">
                <span>编码：</span>
            </el-col>
            <el-col :span="3">
                <el-input
                        size="small"
                        placeholder="请输入编码"
                        v-model="dictionaryCode">
                </el-input>
            </el-col>
            <el-col :span="6" style="padding-left: 8px">
                <el-button class="submit" type="primary" @click="querySearch" size="mini" >搜索</el-button>
                <el-button class="reset" type="info" @click="clearSearch" size="mini" >重置</el-button>
            </el-col>
        </el-row>

        <el-row style="padding: 6px 0">


            <span :key="index" v-for="(btnItem,index) in btns" style="margin-left: 8px;">
                  <el-button v-if="btnItem.type==='iconBtn'" @click="btnClick(btnItem)"
                             :icon="btnItem.icon"></el-button>
                    <el-button v-else @click="btnClick(btnItem)"
                               :icon="btnItem.icon">
                        {{btnItem.label}}
                    </el-button>

            </span>
        </el-row>


        <!--        表格-->
        <el-row style="padding-top: 2px;">
            <el-table-ctl :params="queryParams" :maxHeight="maxHeight" ref="tableObj" :cols="cols"></el-table-ctl>
        </el-row>


        <!--        新增窗口-->
        <app-dialog
                :isShowDialog="isShowAddDialog"
                :title="winTitle"
                width="500"
                @confirm="addConfirm"
                @close="isShowAddDialog=false">
            <dynamicForm :disabledField="disabledField" ref="dynamicForm" @changeVal="changeVal"
                         :items="cols"></dynamicForm>
        </app-dialog>

    </div>
</template>

<script>
    import AppDialog from "@/components/AppCommon/AppDialog";
    import elTableCtl from "../devOpsResource/components/el-table-ctl";
    import dynamicForm from "@/views/devOpsResource/components/dynamicForm";
    import cols, { _changToAddDomain, _getCloneCols} from './data/domainCols.js';
    import crudMixin from '@/mixins/crudMixin.js';
    import { Loading } from 'element-ui';
    import {_getValueMap} from "./data/domainCols";


    export default {
        name: "dataDic",
        mixins: [crudMixin],
        components: {
            AppDialog,
            elTableCtl,
            dynamicForm
        },
        beforeCreate(){
            let loadingInstance = Loading.service({});
            this.api.typeList()
                .then(res => {
                    this.dropOptions=[];
                    let dropOptionArys=[];
                    res.data.forEach(({resourceTypeValue,resourceTypeName})=>{
                        dropOptionArys.push({
                            value: resourceTypeValue+'',
                            label: resourceTypeName
                        });
                    });
                    this.dropOptions=dropOptionArys;
                    cols[0]["options"]=dropOptionArys;
                    cols[0]["optionsMap"]=_getValueMap(dropOptionArys);
                    loadingInstance.close();
                })
                .catch(err => {
                    loadingInstance.close();
                    console.warn(err.msg)
                });
        },
        computed: {
            resourceTypeValueOptions() {
                return this.dropOptions;
            },
            queryParams() {
                return {
                    resourceTypeValue: this.resourceTypeValue,
                    dictionaryName: this.dictionaryName,
                    dictionaryCode: this.dictionaryCode
                };
            }
        },
        data() {
            return {
                dropOptions:[],
                resourceTypeValue: "",
                dictionaryName: "",
                dictionaryCode: "",
                disabledField: [],
                maxHeight: parseFloat(document.body.clientHeight) - 200,
                searchName: '',
                cols: _getCloneCols(cols)
            }
        },
        created() {

        },
        beforeMount() {
            // _initColWidth(this.cols);
        },
        mounted() {
            this.$refs.tableObj.flushGridByUrl("getDateDicList");
        },
        watch: {},
        methods: {
            searchGridByCondition(params,backFun){
                this.$refs.tableObj.reloadData(backFun);
            },
            clearSearch() {
                this.resourceTypeValue = "";
                this.dictionaryName = "";
                this.dictionaryCode = "";
            },
            querySearch() {
                this.$refs.tableObj.reloadData(null,null,true);
            },
            changeVal({id, val}) {
                //如果是字段类型为输入框 则不需要显示枚举值 如果是下拉 才需要显示
                if (id === "dictionaryValueType") {
                    if (val === "2") {
                        this.cols[5]["show"] = false;
                        //2表示下拉框
                        this.cols[4]["show"] = true;
                    } else if (val === "1") {
                        //1表示输入框
                        this.cols[5]["show"] = false;
                        this.cols[4]["show"] = false;
                    }else if (val === "3"||val === "4") {
                        this.cols[4]["show"] = false;
                        //3表示组合
                        this.cols[5]["show"] = true;
                        this.loadSubField();
                    }
                }
            },
            //增加前的方法
            beforeAdd() {
                this.curRecordId = null;
                this.disabledField = [];
                // _initColWidth(cols);
                this.cols = _getCloneCols(cols);
            },
            //加载 组合下拉选项
            loadSubField(){
                this.cols[5]["options"]=[];
                this.api.getDateDicList({loading:false,resourceTypeValue:this.cols[0].value,pageNum:1,pageSize:1000})
                    .then(res => {
                        res.data["list"].forEach(({dictionaryName,dictionaryValueType,id})=>{
                            if((dictionaryValueType+"")!=='3'&&dictionaryValueType+""!=="4"){
                                this.cols[5]["options"].push({
                                    value: id+'',
                                    label: dictionaryName
                                });
                            }
                        })
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            beforeMod() {
                this.disabledField.push('dictionaryCode');
            },
            //修改前加载数据
            loadRecord(id) {
                this.api.getDateDicById({id})
                    .then(res => {
                        this.cols.forEach((item) => {
                            this.curRecordId = res.data["id"];
                            //如果是多选下拉 需要处理下id的数据类型
                            if(typeof(res.data[item["id"]])==="object"){
                                let itemAry=[];
                                res.data[item["id"]].forEach((numberItem)=>{
                                    itemAry.push(numberItem+"")
                                });
                                item["value"] = itemAry;
                            }else{
                                item["value"] = res.data[item["id"]];
                            }

                        });
                        this.changeVal({id:"dictionaryValueType",val:this.cols[3].value+""});
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //删除操作
            delOk(ids) {
                this.api.deleteDateDicResourceById({ids:[ids]})
                    .then(res => {
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //添加操作
            confirmOk() {
                if (this.curRecordId != null && this.curRecordId !== "") {
                    this.modRecordToDb();
                } else {
                    this.addRecordToDb();
                }
            },
            //添加到数据库
            addRecordToDb() {
                let params = _changToAddDomain(this.cols);
                this.api.addDateDicResource(params)
                    .then(res => {
                        this.isShowAddDialog = false;
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //修改数据库记录
            modRecordToDb() {
                let params = _changToAddDomain(this.cols);
                params["id"] = this.curRecordId;
                this.api.updateDateDicResource(params)
                    .then(res => {
                        this.isShowAddDialog = false;
                        this.curRecordId = null;
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            }
        }
    };
</script>
